<template>
  <div style="border: 1px solid #ccc; position: relative;">
    <Toolbar style="border-bottom: 1px solid #ccc" :editor="editorRef" :defaultConfig="toolbarConfig" :mode="mode" />
    <a-buton>按钮</a-buton>
    <Editor style="height: 100px" :defaultConfig="editorConfig" v-model="valueHtml" @onCreated="handleCreated"
      @onChange="onChange" @keydown.enter.native="keyDown" />
    <mention-modal v-if="isShowModal" @hideMentionModal="hideMentionModal" @insertMention="insertMention"
      :position="position"></mention-modal>
    <!-- <div v-html="valueHtml"></div> -->
  </div>
</template>

<script setup>
import '@wangeditor/editor/dist/css/style.css' // 引入 css
import { ref, shallowRef, onBeforeUnmount, nextTick, watch } from 'vue'
import { Boot } from '@wangeditor/editor'
import { Editor, Toolbar } from '@wangeditor/editor-for-vue'
import mentionModule from '@wangeditor/plugin-mention'
import MentionModal from './MentionModal.vue'
import MyModalMenu from './MyModalMenu.js'

const menu1Conf = {
  key: 'compent', // 定义 menu key ：要保证唯一、不重复（重要）
  factory () {
    return new MyModalMenu() // 把 `YourMenuClass` 替换为你菜单的 class
  },
}
// 注册插件
Boot.registerModule(mentionModule)
Boot.registerMenu(menu1Conf)
const toolbarConfig = {}
toolbarConfig.insertKeys = {
  index: 5, // 插入的位置，基于当前的 toolbarKeys
  keys: ['compent',]
}
const props = defineProps({
  content: {
    type: String, default: ''
  }
})
// 编辑器实例，必须用 shallowRef
const editorRef = shallowRef()



// const valueHtml = ref('<p>你好<span data-w-e-type="mention" data-w-e-is-void data-w-e-is-inline data-value="A张三" data-info="%7B%22id%22%3A%22a%22%7D">@A张三</span></p>')
const valueHtml = ref('')
const isShowModal = ref(false)

watch(() => props.content, (val) => {
  nextTick(() => {
    valueHtml.value = val
  })
})

// 组件销毁时，也及时销毁编辑器
onBeforeUnmount(() => {
  const editor = editorRef.value
  if (editor == null) return
  editor.destroy()
})
const position = ref({
  left: '15px',
  top: '40px'
})
const handleCreated = (editor) => {
  editorRef.value = editor // 记录 editor 实例，重要！
  position.value = editor.getSelectionPosition()
}

const showMentionModal = () => {
  // 对话框的定位是根据富文本框的光标位置来确定的
  nextTick(() => {
    const editor = editorRef.value
    console.log(editor.getSelectionPosition())
    position.value = editor.getSelectionPosition()
  })
  isShowModal.value = true
}
const hideMentionModal = () => {
  isShowModal.value = false
}
const editorConfig = {
  placeholder: '请输入内容...',

  EXTEND_CONF: {
    mentionConfig: {
      showModal: showMentionModal,
      hideModal: hideMentionModal,
    },
  },
}

const onChange = (editor) => {
  console.log('changed html', editor.getHtml())
  console.log('changed content', editor.children)
}

const insertMention = (id, username) => {
  const mentionNode = {
    type: 'mention', // 必须是 'mention'
    value: username,
    info: { id },
    children: [{ text: '' }], // 必须有一个空 text 作为 children
  }
  const editor = editorRef.value
  if (editor) {
    editor.restoreSelection() // 恢复选区
    editor.deleteBackward('character') // 删除 '@'
    editor.insertNode(mentionNode) // 插入 mention
    editor.move(1) // 移动光标
  }
}
const keyDown = (e) => {
  // 执行一些逻辑方法
  const editor = editorRef.value
  console.log(editor.children[0].children.filter((item) => item.type === 'mention').map((item) => item.info.id), 'key === 发song')
  // this.sendBut()//发送信息的方法
  if (e != undefined) {
    e.preventDefault() // 阻止浏览器默认的敲击回车换行的方法
  }
}

</script>

<style src="@wangeditor/editor/dist/css/style.css"></style>
<style scoped>
.w-e-scroll {
  max-height: 100px;
}
</style>
